import { useCallback } from "react"
import styled from "@emotion/styled"
import { css } from "@emotion/react"
import MarginTopBlock from "@/components/base/MarginTopBlock"
import { ButtonConfirm, ButtonDoItLater } from "./components/common"
import { createLogger } from "@/utils/logger"
import { motion } from "motion/react"
import { useNavigate } from "react-router-dom"
import Image from "@/components/base/Image"
import { computed } from "@preact/signals"
import useCountdown from "ahooks/lib/useCountDown"
import KycPageSignals from "@/features_signal/kycPageSignals"

const logger = createLogger("StepKycEntry")

export default function StepKycEntry() {
    const notApprovedWithin72Hours = KycPageSignals.notApprovedWithin72Hours.value

    const title = computed(() => {
        switch (KycPageSignals.currentStatus.value) {
            case "rejected":
                return "KYC Verify Rejected"
            default:
                return "KYC Verify"
        }
    }).value

    const description = computed(() => {
        if (notApprovedWithin72Hours) {
            return "According to the latest policy of PAGCOR, after successfully registering on this platform, users must complete KYC certification and pass the review within 72 hours, otherwise the account will be restricted after 72 hours until KCY certification is completed."
        }
        switch (KycPageSignals.currentStatus.value) {
            case "rejected":
                return "We are sorry, due to “Screen capture or reproduction “ “Document tampering or obstructions” ”Facial recognition error” “invalid or expired ID” “incomplete KYC reasons, the KYC certification you submitted did not pass the review, please try again later”"
        }
    }).value

    const caption = computed(() => {
        if (notApprovedWithin72Hours) {
            return "If you do not complete KYC verification, your account will be restricted after"
        }
        switch (KycPageSignals.currentStatus.value) {
            case "rejected":
                return "If you do not complete KYC verification, your account will be restricted after"
        }
    }).value

    const handleStartKyc = useCallback(() => {
        logger.info("handleStartKyc")
        KycPageSignals.nextStage()
    }, [])

    const handleDoItLater = useCallback(() => {
        KycPageSignals.doItLater()
    }, [])

    return (
        <div
            css={css`
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                padding: 0 24rem;
            `}
        >
            <Image
                css={css`
                    width: 96rem;
                    height: 96rem;
                    align-self: center;
                `}
                src="kyc/entry_warn.webp"
            />
            <MarginTopBlock top={12} />
            <div
                css={css`
                    font-family: Gilroy;
                    font-weight: 700;
                    font-size: 20rem;
                    line-height: 32rem;
                    letter-spacing: 0%;
                    text-align: center;
                    text-transform: capitalize;
                `}
            >
                {title}
            </div>
            <MarginTopBlock top={12} />
            <div
                css={css`
                    font-family: Gilroy;
                    font-weight: 500;
                    font-size: 14rem;
                    line-height: 20rem;
                    letter-spacing: 0%;
                    text-align: center;
                `}
            >
                {description}
            </div>
            <MarginTopBlock top={24} />
            <div
                css={css`
                    font-family: Gilroy;
                    font-weight: 500;
                    font-size: 12rem;
                    line-height: 16rem;
                    letter-spacing: 0%;
                    text-align: center;
                    vertical-align: middle;
                `}
            >
                {caption}
            </div>
            <MarginTopBlock top={24} />
            {!notApprovedWithin72Hours && <CountDownRow />}
            <MarginTopBlock top={88} />
            <div
                css={css`
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: stretch;
                `}
            >
                <ButtonConfirm onClick={handleStartKyc}>Start KYC</ButtonConfirm>
                {!notApprovedWithin72Hours && (
                    <ButtonDoItLater onClick={handleDoItLater}>Do it later</ButtonDoItLater>
                )}
            </div>
        </div>
    )
}

const NumberBlock = styled(motion.div)`
    background: #f5f5f5;
    width: 72rem;
    height: 80rem;
    border-radius: 12rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-family: Gilroy;
    font-weight: 700;
    font-size: 32rem;
    line-height: 48rem;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
`

function CountDownRow() {
    const [total, { days, hours: _hours, minutes, seconds }] = useCountdown({
        targetDate: KycPageSignals.expiredAt.peek(),
    })

    const hours = computed(() => {
        return days * 24 + _hours
    })

    const items = computed(() => {
        return [hours, minutes, seconds].map((item, itemIndex) => {
            const itemString = item.toString().padStart(2, "0")
            const itemType = (() => {
                switch (itemIndex) {
                    case 0:
                        return "hours"
                    case 1:
                        return "minutes"
                    case 2:
                        return "seconds"
                }
            })()
            return (
                <NumberBlock
                    initial={{ opacity: 0 }}
                    animate={{
                        opacity: 1,
                        color: total <= 0 ? "#ff0000" : "#000000",
                    }}
                    transition={{ duration: 0.5 }}
                >
                    {itemString}
                    <motion.div
                        css={css`
                            font-family: Gilroy;
                            font-weight: 500;
                            font-size: 12rem;
                            line-height: 16rem;
                            letter-spacing: 0%;
                            text-align: center;
                            vertical-align: middle;
                            text-transform: capitalize;
                        `}
                    >
                        {itemType}
                    </motion.div>
                </NumberBlock>
            )
        })
    })

    return (
        <div
            css={css`
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 11rem;
            `}
        >
            {items.value}
        </div>
    )
}
